---
title: Textarea
package: "@chakra-ui/textarea"
image: "components/textarea.svg"
---

The `Textarea` component allows you to easily create multi-line text inputs.

<ComponentLinks
  theme={{ componentName: "textarea" }}
  github={{ package: "textarea" }}
  npm={{ package: "@chakra-ui/textarea" }}
/>

<carbon-ad></carbon-ad>

## Import

```js
import { Textarea } from "@chakra-ui/react"
```

### Usage

```jsx
<Textarea placeholder="Here is a sample placeholder" />
```

### Controlled Textarea

```jsx
function Example() {
  let [value, setValue] = React.useState("")

  let handleInputChange = (e) => {
    let inputValue = e.target.value
    setValue(inputValue)
  }
  return (
    <>
      <Text mb="8px">Value: {value}</Text>
      <Textarea
        value={value}
        onChange={handleInputChange}
        placeholder="Here is a sample placeholder"
        size="sm"
      />
    </>
  )
}
```

### Resize behavior

You can add `resize` prop to change the `Textarea` resize behavior.

```jsx
function ResizeExample() {
  const [resize, setResize] = React.useState("horizontal")

  return (
    <>
      <RadioGroup defaultValue={resize} onChange={setResize} mb={6}>
        <Stack direction="row" spacing={5}>
          <Radio value="horizontal">Horizontal</Radio>
          <Radio value="vertical">Vertical</Radio>
          <Radio value="none">None</Radio>
        </Stack>
      </RadioGroup>

      <Textarea
        placeholder="Here is a sample placeholder"
        size="sm"
        resize={resize}
      />
    </>
  )
}
```

### Disabled Textarea

```jsx
<Textarea isDisabled placeholder="Here is a sample placeholder" />
```

### Invalid Textarea

```jsx
<Textarea isInvalid placeholder="Here is a sample placeholder" />
```

## Props

The Textarea composes the [Input](/docs/form/input) component.

<PropsTable of="Textarea" />
